<template>
    <ul class="order">
        <li>
            <div class="order-info">
                <p style="margin-bottom: 0;margin-top: 0">
                    {{orderVO.businessVO.businessName}}
                    <font-awesome-icon @click="isDisplay=!isDisplay" :icon="['fas', 'caret-down']" style="margin-left: 1vw;" />
                </p>
                <div v-if="!isPaymentPage && isNeedPaied" class="order-info-right">
                    <p>&#165;{{orderVO.totalPrice }}</p>
                    <div class="order-info-right-icon" @click="navigatorToPay(orderVO.id)">去支付</div>
                </div>
                <div v-else class="order-info-right">
                    <p style="color: red">&#165;{{orderVO.totalPrice}}</p>
                </div>
            </div>
            <ul class="order-detailet" :style="isDisplay?'display: block':'display: none'">
                <template v-for="item in orderVO.orderDetailVOS">
                    <li>
                        <p>{{item.foodName}} x {{item.quantity}}</p>
                        <p>&#165;{{item.quantity*item.foodPrice}}</p>
                    </li>
                </template>
                <li>
                    <p>配送费</p>
                    <p>&#165;{{orderVO.businessVO.deliveryPrice }}</p>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script setup lang="ts">
import {ref, defineProps, toRefs, watch} from 'vue'
import router from "../router";
import {OrderVO} from "../type/order";
import {BusinessVO} from "../type/business";
import {getOrderByIdAPI} from "../service/order.ts";

const isDisplay = ref(false)

const props = defineProps({
    isPaymentPage: {
        type: Boolean,
        default: false
    }
    ,id: {
        type: Number,
        default: 0
    }
    ,isNeedPaied: {
        type: Boolean,
        default: false
    }
})
const {id} = toRefs(props)
const isPaymentPage = props.isPaymentPage
const isNeedPaied = props.isNeedPaied

const orderVO= ref<OrderVO>({
    id:0,
    customerId:0,
    totalPrice:0,
    orderDetailVOS:[],
    businessVO:new class implements BusinessVO {
        businessAddress: string;
        businessExplain: string;
        businessImg: string;
        businessName: string;
        deliveryPrice: number;
        id: number;
        quantity: number;
        starPrice: number;
    },
    orderState: 0
})

watch(id,async (value)=>{
    if (value > 0){
        //获取订单信息
        const res = await getOrderByIdAPI(value as number);
        if (res.data != null && res.data.id>0){
            orderVO.value = res.data;
        }
    }
},{immediate:!isPaymentPage})
const navigatorToPay = (orderId)=>{
    router.push({path:`/pay/${orderId}`})
}
</script>

<style scoped>
/****************** 历史订单列表部分 ******************/

.order{
    margin: 0;
    width: 100%;
}
.order li{
    width: 100%;
}
.order li .order-info{
    box-sizing: border-box;
    padding: 2vw 4vw;
    font-size: 4vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 8.5vw;
}
.order li .order-info .order-info-right{
    display: flex;
    justify-content: center;
    align-items: center;
}
.order li .order-info .order-info-right .order-info-right-icon{
    background-color: #f90;
    color: #fff;
    border-radius: 3px;
    margin-left: 2vw;
    user-select: none;
    cursor: pointer;
    height: 5.5vw;
}
.order li .order-detailet{
    width: 100%;
}
.order li .order-detailet li{
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    color: #666;
    font-size: 3vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
